// Link

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  transition: all $--x-animation-duration-base ease-in-out;
  > x-icon {
    margin-right: 0.125rem;
  }
  &-underline {
    &:hover:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      bottom: 0;
      border-bottom: 0.0625rem solid $--x-primary;
    }
  }
  &-icon-right {
    flex-direction: row-reverse;
    > x-icon {
      margin-right: 0;
      margin-left: 0.125rem;
    }
  }
  &-only-icon {
    > x-icon {
      margin-right: 0;
      margin-left: 0;
    }
  }
  @include link-type('', inherit, $--x-primary, $--x-primary-a100, $--x-text-400);
  @include link-type('primary', $--x-primary, $--x-primary-100, $--x-primary-300, $--x-primary-400);
  @include link-type('success', $--x-success, $--x-success-100, $--x-success-300, $--x-success-400);
  @include link-type('warning', $--x-warning, $--x-warning-100, $--x-warning-300, $--x-warning-400);
  @include link-type('danger', $--x-danger, $--x-danger-100, $--x-danger-300, $--x-danger-400);
  @include link-type('info', $--x-info, $--x-info-100, $--x-info-300, $--x-info-400);
}

@mixin link-type($type, $color, $hover-color, $active-color, $disabled-color) {
  @if $type!= '' {
    $type: '-' + $type;
  }
  &#{$type} {
    color: $color;
    &:hover {
      color: $hover-color;
      &:after {
        border-color: $hover-color;
      }
    }
    &:active {
      color: $active-color;
    }
    &.#{$--x-link}-disabled {
      color: $disabled-color;
      cursor: not-allowed;
      &:active {
        transform: none;
      }
      &:hover:after {
        border-color: transparent;
      }
    }
  }
}
